<template>
  <div class="container">
    <!--    后台菜单管理-->
    <el-card class="con-left">
      <template #header>
        <div class="card-header">
          <span>后台菜单管理</span>
        </div>
      </template>
      <div class="text-item">
        <el-tree
          :data="treeData"
          :check-strictly="true"
          node-key="id"
          ref="treeRef"
          show-checkbox
          @check="checkChange"
          default-expand-all
          @check-change="handleNodeClick"
          :expand-on-click-node="false"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span class="c-font-14">{{ data.name }}</span>
              <span class="c-m-l-20" v-if="data.type === 0">
                <TsButton
                  perms="menus:post"
                  v-show="data.type === 0"
                  icon="el-icon-circle-plus-outline"
                  type="text"
                  @click="add(data, node)"
                >
                </TsButton>
                <TsButton
                  perms="menus:$id:delete"
                  v-if="data.type === 0 && node.level !== 1"
                  icon="el-icon-delete"
                  type="text"
                  @click="remove(node, data)"
                  style="color: #f88d8d"
                ></TsButton>
                <TsButton
                  perms="menus:$id:put"
                  v-if="data.type === 0 && node.level !== 1"
                  icon="el-icon-edit-outline"
                  type="text"
                  @click="edit(data)"
                  style="color: #f88d8d"
                ></TsButton>
              </span>
            </span>
          </template>
        </el-tree>
      </div>
    </el-card>
    <!--    操作信息-->
    <el-card class="con-right">
      <template #header>
        <div class="card-header">
          <span>操作信息</span>
        </div>
      </template>
      <el-tree
        :data="optionData"
        :expand-on-click-node="false"
        default-expand-all
        node-key="id"
      >
        <template #default="{ node, data }">
          <span class="c-font-14">{{ data.name }}</span>
          <span class="c-m-l-20">
            <TsButton
              perms="menus:post"
              v-if="node.level === 1"
              icon="el-icon-circle-plus-outline"
              size="mini"
              type="text"
              @click="() => addOptionMenu(data)"
            >
            </TsButton>
            <TsButton
              perms="menus:$id:delete"
              v-if="node.level > 1"
              type="text"
              size="mini"
              icon="el-icon-delete"
              style="color: #f88d8d"
              @click="() => remove(node, data)"
            >
            </TsButton>
          </span>
        </template>
      </el-tree>
    </el-card>
    <!--    父级元素新增对话框-->
    <el-dialog v-model="addDialogVisible" title="新增" width="50%">
      <el-form ref="form" :model="addForm" label-width="80px" :rules="addRules">
        <el-form-item label="父级" prop="parentName">
          <el-input v-model="addForm.parentName" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="路由" prop="url">
          <el-input
            v-model="addForm.url"
            placeholder="请输入路由地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="授权码" prop="permission">
          <el-input
            v-model="addForm.permission"
            placeholder="请输入授权码"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            v-model="addForm.sort"
            placeholder="请输入排序数"
          ></el-input>
        </el-form-item>
        <!--        <el-form-item label="图标">-->
        <!--          <el-upload-->
        <!--            action="/api/storages"-->
        <!--            list-type="picture-card"-->
        <!--            :on-remove="handleRemove"-->
        <!--            :on-success="handleSuccess"-->
        <!--            accept=".jpeg,.png,.jpg,.bmp,.gif"-->
        <!--            :file-list="addFileList"-->
        <!--            :before-upload="checkFileType"-->
        <!--            :headers="header"-->
        <!--            :on-exceed="handleOnExceed"-->
        <!--            :limit="1"-->
        <!--            name="multipartFile"-->
        <!--          >-->
        <!--            <i class="el-icon-plus"></i>-->
        <!--            <template #tip>-->
        <!--              <div class="el-upload__tip">-->
        <!--                <i class="el-icon-warning-outline"></i>-->
        <!--                <span class="c-m-l-5"-->
        <!--                  >图片支持JPG，Jpeg，Png，请上传10M以内的图片</span-->
        <!--                >-->
        <!--              </div>-->
        <!--            </template>-->
        <!--          </el-upload>-->
        <!--        </el-form-item>-->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="addCancel">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!--    编辑节点对话框-->
    <el-dialog v-model="editDialogVisible" title="编辑菜单" width="30%">
      <el-form
        ref="editFormRef"
        :model="editForm"
        label-width="80px"
        :rules="addRules"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="editForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="路由" prop="url">
          <el-input
            v-model="editForm.url"
            placeholder="请输入路由地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="授权码" prop="permission">
          <el-input
            v-model="editForm.permission"
            placeholder="请输入授权码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="sort" label="排序">
          <el-input
            v-model="editForm.sort"
            placeholder="请输入排序数"
          ></el-input>
        </el-form-item>
        <!--        <el-form-item label="图标">-->
        <!--          <el-upload-->
        <!--            action="/api/storages"-->
        <!--            list-type="picture-card"-->
        <!--            :on-remove="editHandleRemove"-->
        <!--            :on-success="editHandleSuccess"-->
        <!--            accept=".jpeg,.png,.jpg,.bmp,.gif"-->
        <!--            :file-list="editFileList"-->
        <!--            :before-upload="checkFileType"-->
        <!--            :headers="header"-->
        <!--            :on-exceed="handleOnExceed"-->
        <!--            :limit="1"-->
        <!--            name="multipartFile"-->
        <!--          >-->
        <!--            <i class="el-icon-plus"></i>-->
        <!--            <template #tip>-->
        <!--              <div class="el-upload__tip">-->
        <!--                <i class="el-icon-warning-outline"></i>-->
        <!--                <span class="c-m-l-5"-->
        <!--                  >图片支持JPG，Jpeg，Png，请上传10M以内的图片</span-->
        <!--                >-->
        <!--              </div>-->
        <!--            </template>-->
        <!--          </el-upload>-->
        <!--        </el-form-item>-->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="editSubmit">确定</el-button>
          <el-button @click="editCancel">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!--    操作信息新增对话框-->
    <el-dialog v-model="addOptionDialogVisible" title="新增" width="30%">
      <el-form ref="form" :model="addOptionForm">
        <el-form-item label="名称">
          <el-input
            v-model="addOptionForm.name"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="路由">
          <el-input
            v-model="addOptionForm.url"
            placeholder="请输入路由地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitOption">确定</el-button>
          <el-button @click="addOptionDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import menuManagement from "@/composables/system/menu-management";
import { reactive } from "vue";
import Cookies from "js-cookie";
import TsButton from "../../components/TsButton";
export default {
  name: "MenuManagement",
  components: { TsButton },
  setup() {
    const header = reactive({ Authorization: Cookies.get("token") });
    const {
      editCancel,
      editHandleSuccess,
      editFileList,
      editFormRef,
      addRules,
      addCancel,
      form,
      handleOnExceed,
      checkFileType,
      treeData,
      addOptionForm,
      addOptionMenu,
      getImgUrl,
      submitOption,
      addOptionDialogVisible,
      editSubmit,
      checkedId,
      addForm,
      addDialogVisible,
      add,
      handleNodeClick,
      treeRef,
      checkChange,
      optionData,
      addChildDialogVisible,
      remove,
      submit,
      edit,
      editDialogVisible,
      editForm,
      handleRemove,
      handleSuccess,
      addFileList,
      editHandleRemove,
    } = menuManagement();
    return {
      editCancel,
      editHandleSuccess,
      editHandleRemove,
      editFileList,
      editFormRef,
      addCancel,
      addRules,
      form,
      handleOnExceed,
      checkFileType,
      treeData,
      submitOption,
      addOptionMenu,
      addOptionForm,
      addOptionDialogVisible,
      editSubmit,
      checkedId,
      addForm,
      addDialogVisible,
      add,
      getImgUrl,
      handleNodeClick,
      treeRef,
      checkChange,
      optionData,
      addChildDialogVisible,
      remove,
      submit,
      edit,
      editDialogVisible,
      editForm,
      header,
      handleRemove,
      handleSuccess,
      addFileList,
    };
  },
};
</script>

<style scoped lang="scss">
.text-item {
  // 一级节点不显示复选框
  /deep/.el-tree > .el-tree-node > .el-tree-node__content .el-checkbox {
    display: none;
  }
  // 二级节点不显示复选框
  /deep/.el-tree
    > .el-tree-node
    > .el-tree-node__children
    > .el-tree-node
    > .el-tree-node__content
    > .el-checkbox {
    display: none;
  }
}
.container {
  height: calc(100vh - 180px);
  display: flex;
  .con-left {
    font-size: 16px;
    flex: 1;
    margin-right: 20px;
    overflow-y: auto;
    .custom-tree-node {
    }
  }
  .con-right {
    flex: 1;
  }
}
</style>
